// card

$card: (
    size: (
        default: (
            desktop: 50px,
            mobile: 40px
        ),
        sm: (
            desktop: 40px,
            mobile: 30px
        ),
        lg: (
            desktop: 60px,
            mobile: 50px
        )
    ),
    space: (
        desktop: 15px,
        mobile: 10px
    ),
    bottom-space: (
        // 与栅格padding*2保存一致
        desktop: 20px,
        mobile: 10px
    ),
    background-color: #fff,
    border-color: e-base-color(grey, 2),
    shadow: 0 0 13px 0 rgba(82, 63, 105, .05)
);

.card {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    box-shadow: e-get($card, shadow);
    background-color: e-get($card, background-color);
    margin-bottom: e-get($card, bottom-space, desktop);
    border-radius: $e-border-radius;

    .card-head {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        position: relative;
        padding: 0 e-get($card, space, desktop);
        border-bottom: 1px solid e-get($card, border-color);
        min-height: e-get($card, size, default, desktop);
        @include e-rounded {
            border-top-left-radius: $e-border-radius;
            border-top-right-radius: $e-border-radius;
        }

        &.card-head-no-border {
            border-bottom: 0;
        }

        .card-head-label {
            display: flex;
            align-items: center;
            align-content: flex-start;

            .card-head-title {
                margin: 0;
                padding: 0;
                font-size: 1.2rem;
                font-weight: 500;
                color: e-base-color(label, 4);

                small {
                    font-weight: 400;
                    padding-left: .5rem;
                    font-size: 1rem;
                    color: e-base-color(label, 2);
                }
            }

            .card-head-icon {
                padding-right: .75rem;
                padding-top: 3px;
                font-size: 1.6rem;
                line-height: 0;
                color: e-base-color(label, 2);

                g [fill] {
                    fill: e-base-color(label, 2);
                }
            }
        }

        .card-head-toolbar {
            display: flex;
            align-items: center;
            align-content: flex-end;

            .nav-pills,
            .nav-tabs {
                margin: 0;
            }

            .card-head-wrapper {
                display: flex;
                align-items: center;
            }
        }
    }

    // 非白色背景，文字+边框设置为白色
    &.card--skin-solid {
        // 头部
        .card-head {
            .card-head-label {
                .card-head-title {
                    color: #fff;

                    small {
                        color: rgba(#fff, .8);
                    }
                }

                .card-head-icon {
                    color: rgba(#fff, .8);
                }
            }

            &:not(.card-head--no-border) {
                border-bottom: 1px solid rgba(#fff, .2);
            }
        }

        // Body
        .card-body {
            color: #fff;
        }
    }

    // Head 尺寸
    &.card--head-sm {
        .card-head {
            min-height: e-get($card, size, sm, desktop);
        }
    }

    &.card--head-lg {
        .card-head {
            min-height: e-get($card, size, lg, desktop);
        }
    }

    .card-body {
        display: flex;
        flex-direction: column;
        padding: e-get($card, space, desktop);
    }

    .card-foot {
        padding: e-get($card, space, desktop);
        border-top: 1px solid e-get($card, border-color);

        .card-foot-wrapper {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
        }

        @include e-rounded {
            border-bottom-left-radius: $e-border-radius;
            border-bottom-right-radius: $e-border-radius;
        }
        // foot 尺寸
        &.card-foot--sm {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        &.card-foot--lg {
            padding-top: 15px;
            padding-bottom: 15px;
        }
        // foot 不添加边框
        &.card-foot-no-border {
            border-top: 0;
        }
    }
    // 不使用阴影，使用边框
    .card--bordered {
        box-shadow: none;
        border: 1px solid e-get($card, border-color);
    }

    // 不使用圆角
    &.card--no-round{
        .card-head, .card-foot {
            border-radius: 0;
        }
    }
    // 最后一个card不需要margin-bottom
    &.card--last {
        margin-bottom: 0;
    }

    &.card--fullscreen{
        position: fixed;
        z-index: $e-modal-z-index + 1;
        top: e-get($e-page-padding, desktop);
        left: e-get($e-page-padding, desktop);
        width: calc(100% - 40px);
        height: calc(100% - 40px);
    }
}


@include e-desktop {
    .card {
        &.card--height-fluid {
            height: calc(100% - #{e-get($card, bottom-space, desktop)});

            .card-body {
                flex-grow: 1;
            }
        }

        &.card--height-fluid-half {
            height: calc(50% - #{e-get($card, bottom-space, desktop)});

            .card-body {
                flex-grow: 1;
            }
        }
    }
}